<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">←</text>
				<text class="back-text">返回</text>
			</view>
			<text class="page-title">积分审批</text>
			<view class="header-right">
				<text class="refresh-btn" @click="refreshData">刷新</text>
			</view>
		</view>

		<!-- 筛选器 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view 
					class="filter-tab" 
					:class="{ active: selectedStatus === 'all' }"
					@click="selectStatus('all')"
				>
					<text class="tab-text">全部</text>
					<view class="tab-count">{{ getTotalCount() }}</view>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: selectedStatus === 'pending' }"
					@click="selectStatus('pending')"
				>
					<text class="tab-text">待审批</text>
					<view class="tab-count">{{ getPendingCount() }}</view>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: selectedStatus === 'approved' }"
					@click="selectStatus('approved')"
				>
					<text class="tab-text">已通过</text>
					<view class="tab-count">{{ getApprovedCount() }}</view>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: selectedStatus === 'rejected' }"
					@click="selectStatus('rejected')"
				>
					<text class="tab-text">已拒绝</text>
					<view class="tab-count">{{ getRejectedCount() }}</view>
				</view>
			</view>
		</view>

		<!-- 积分列表 -->
		<scroll-view class="list-scroll" scroll-y>
			<view class="list-container">
				<view
					v-for="(item, index) in filteredPointsList"
					:key="item.id"
					class="points-card"
					@click="viewPointsDetail(item)"
				>
					<!-- 卡片头部 -->
					<view class="card-header">
						<view class="header-left">
							<text class="record-time">{{ formatTime(item.recordTime) }}</text>
							<view class="status-badge" :class="getStatusClass(item.status)">
								<text class="status-text">{{ getStatusText(item.status) }}</text>
							</view>
						</view>
						<view class="header-right">
							<text class="department-name">{{ item.departmentName }}</text>
						</view>
					</view>

					<!-- 卡片内容 -->
					<view class="card-content">
						<view class="content-row">
							<text class="label">责任人：</text>
							<text class="value">{{ item.responsiblePersonName }}</text>
						</view>
						<view class="content-row">
							<text class="label">事件描述：</text>
							<text class="value description">{{ item.eventDescription }}</text>
						</view>
						<view class="content-row">
							<text class="label">积分：</text>
							<text class="value points-value" :class="item.pointsType === 'add' ? 'points-positive' : 'points-negative'">
								{{ item.pointsType === 'add' ? '+' : '-' }}{{ item.pointsValue }}
							</text>
						</view>
						<view class="content-row">
							<text class="label">记录人：</text>
							<text class="value">{{ item.recorderName }}</text>
						</view>
						<view class="content-row" v-if="item.approvalTime">
							<text class="label">审批时间：</text>
							<text class="value">{{ formatDateTime(item.approvalTime) }}</text>
						</view>
						<view class="content-row" v-if="item.approvalComment">
							<text class="label">审批意见：</text>
							<text class="value description">{{ item.approvalComment }}</text>
						</view>
					</view>

					<!-- 卡片底部 -->
					<view class="card-footer">
						<view class="points-info">
							<text class="info-text">严重程度: {{ getSeverityText(item.severity) }}</text>
							<text class="info-text">地点: {{ item.location }}</text>
						</view>
						<view class="action-buttons">
							<button 
								class="action-btn detail-btn" 
								@click.stop="viewPointsDetail(item)"
							>
								查看详情
							</button>
							<button 
								v-if="item.status === 'pending'"
								class="action-btn approve-btn" 
								@click.stop="approvePoints(item, 'approved')"
							>
								通过
							</button>
							<button 
								v-if="item.status === 'pending'"
								class="action-btn reject-btn" 
								@click.stop="approvePoints(item, 'rejected')"
							>
								拒绝
							</button>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="filteredPointsList.length === 0" class="empty-state">
					<text class="empty-icon">⭐</text>
					<text class="empty-text">暂无积分记录</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedStatus: 'pending', // 默认选择待审批
				pointsList: [
					{
						id: '1',
						recordTime: '2025-01-15 09:30:00',
						departmentName: '安全部',
						responsiblePersonName: '张三',
						eventDescription: '发现员工未佩戴安全帽进入施工现场，存在安全隐患',
						pointsType: 'deduct',
						pointsValue: 5,
						recorderName: '李四',
						status: 'pending',
						severity: 'medium',
						location: 'A区施工现场'
					},
					{
						id: '2',
						recordTime: '2025-01-15 14:20:00',
						departmentName: '生产部',
						responsiblePersonName: '赵六',
						eventDescription: '主动发现并报告安全隐患，避免事故发生',
						pointsType: 'add',
						pointsValue: 10,
						recorderName: '孙七',
						status: 'pending',
						severity: 'high',
						location: 'B车间'
					},
					{
						id: '3',
						recordTime: '2025-01-14 16:45:00',
						departmentName: '安全部',
						responsiblePersonName: '周八',
						eventDescription: '未按规定进行安全交底',
						pointsType: 'deduct',
						pointsValue: 3,
						recorderName: '吴九',
						status: 'approved',
						approvalTime: '2025-01-14 17:00:00',
						approvalComment: '同意扣分，请加强安全交底工作',
						severity: 'low',
						location: 'C区施工现场'
					},
					{
						id: '4',
						recordTime: '2025-01-13 11:15:00',
						departmentName: '技术部',
						responsiblePersonName: '郑十',
						eventDescription: '违规操作设备，存在安全隐患',
						pointsType: 'deduct',
						pointsValue: 8,
						recorderName: '冯十一',
						status: 'rejected',
						approvalTime: '2025-01-13 11:30:00',
						approvalComment: '证据不足，需要进一步核实',
						severity: 'high',
						location: 'D车间'
					}
				]
			}
		},
		computed: {
			filteredPointsList() {
				if (this.selectedStatus === 'all') {
					return this.pointsList
				}
				return this.pointsList.filter(item => item.status === this.selectedStatus)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			refreshData() {
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})
			},
			
			selectStatus(status) {
				this.selectedStatus = status
			},
			
			getTotalCount() {
				return this.pointsList.length
			},
			
			getPendingCount() {
				return this.pointsList.filter(item => item.status === 'pending').length
			},
			
			getApprovedCount() {
				return this.pointsList.filter(item => item.status === 'approved').length
			},
			
			getRejectedCount() {
				return this.pointsList.filter(item => item.status === 'rejected').length
			},
			
			getStatusClass(status) {
				return `status-${status}`
			},
			
			getStatusText(status) {
				const statusMap = {
					pending: '待审批',
					approved: '已通过',
					rejected: '已拒绝'
				}
				return statusMap[status] || status
			},
			
			getSeverityText(severity) {
				const severityMap = {
					low: '低',
					medium: '中',
					high: '高'
				}
				return severityMap[severity] || severity
			},
			
			formatTime(time) {
				return time.split(' ')[0]
			},
			
			formatDateTime(time) {
				const date = new Date(time)
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				const hours = date.getHours().toString().padStart(2, '0')
				const minutes = date.getMinutes().toString().padStart(2, '0')
				return `${month}-${day} ${hours}:${minutes}`
			},
			
			viewPointsDetail(item) {
				uni.showToast({
					title: `查看积分详情: ${item.id}`,
					icon: 'none'
				})
			},
			
			approvePoints(item, action) {
				const actionText = action === 'approved' ? '通过' : '拒绝'
				uni.showModal({
					title: `${actionText}积分审批`,
					content: `确定要${actionText}这条积分记录吗？`,
					success: (res) => {
						if (res.confirm) {
							item.status = action
							item.approvalTime = new Date().toLocaleString()
							item.approvalComment = action === 'approved' ? '审批通过' : '审批拒绝'
							uni.showToast({
								title: `${actionText}成功`,
								icon: 'success'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #f8f9fa;
		min-height: 100vh;
	}
	
	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #e4e7ed;
		
		.header-left {
			display: flex;
			align-items: center;
			
			.back-icon {
				font-size: 36rpx;
				margin-right: 10rpx;
				color: #409EFF;
			}
			
			.back-text {
				font-size: 28rpx;
				color: #409EFF;
			}
		}
		
		.page-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.header-right {
			.refresh-btn {
				font-size: 28rpx;
				color: #409EFF;
			}
		}
	}
	
	.filter-section {
		background: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #e4e7ed;
		
		.filter-tabs {
			display: flex;
			gap: 16rpx;
			flex-wrap: wrap;
			
			.filter-tab {
				position: relative;
				padding: 16rpx 20rpx;
				border-radius: 24rpx;
				background: #f5f5f5;
				display: flex;
				align-items: center;
				gap: 8rpx;
				transition: all 0.3s ease;
				
				&.active {
					background: #409EFF;
					
					.tab-text {
						color: #fff;
					}
					
					.tab-count {
						background: rgba(255, 255, 255, 0.3);
						color: #fff;
					}
				}
				
				.tab-text {
					font-size: 26rpx;
					color: #666;
					font-weight: 500;
				}
				
				.tab-count {
					background: #e4e7ed;
					color: #666;
					border-radius: 12rpx;
					padding: 4rpx 10rpx;
					font-size: 20rpx;
					min-width: 28rpx;
					text-align: center;
				}
			}
		}
	}
	
	.list-scroll {
		flex: 1;
	}
	
	.list-container {
		padding: 20rpx;
		
		.points-card {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
			overflow: hidden;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.98);
			}
			
			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 30rpx 16rpx;
				border-bottom: 1rpx solid #f0f0f0;
				
				.header-left {
					display: flex;
					align-items: center;
					gap: 16rpx;
					
					.record-time {
						font-size: 32rpx;
						font-weight: bold;
						color: #409EFF;
					}
					
					.status-badge {
						padding: 8rpx 16rpx;
						border-radius: 12rpx;
						font-size: 22rpx;
						
						&.status-pending {
							background: #fff7e6;
							color: #fa8c16;
						}
						
						&.status-approved {
							background: #f6ffed;
							color: #52c41a;
						}
						
						&.status-rejected {
							background: #fff2f0;
							color: #ff4d4f;
						}
						
						.status-text {
							font-weight: 500;
						}
					}
				}
				
				.header-right {
					.department-name {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			
			.card-content {
				padding: 20rpx 30rpx;
				
				.content-row {
					display: flex;
					margin-bottom: 16rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.label {
						font-size: 28rpx;
						color: #666;
						min-width: 160rpx;
					}
					
					.value {
						font-size: 28rpx;
						color: #333;
						flex: 1;
						
						&.description {
							line-height: 1.4;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						
						&.points-value {
							font-weight: bold;
							font-size: 32rpx;
							
							&.points-positive {
								color: #52c41a;
							}
							
							&.points-negative {
								color: #ff4d4f;
							}
						}
					}
				}
			}
			
			.card-footer {
				padding: 20rpx 30rpx 24rpx;
				border-top: 1rpx solid #f0f0f0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.points-info {
					display: flex;
					flex-direction: column;
					gap: 8rpx;
					
					.info-text {
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.action-buttons {
					display: flex;
					gap: 12rpx;
					
					.action-btn {
						padding: 10rpx 20rpx;
						border-radius: 20rpx;
						font-size: 22rpx;
						border: none;
						
						&.detail-btn {
							background: #f0f0f0;
							color: #666;
						}
						
						&.approve-btn {
							background: #52c41a;
							color: #fff;
						}
						
						&.reject-btn {
							background: #ff4d4f;
							color: #fff;
						}
					}
				}
			}
		}
		
		.empty-state {
			text-align: center;
			padding: 120rpx 0;
			
			.empty-icon {
				font-size: 120rpx;
				margin-bottom: 20rpx;
			}
			
			.empty-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>